<script lang="ts" setup>
import type { User } from '@jari-ace/app-bolts';

import type { RouteRecordStringComponent } from '@vben/types';

import type { Result } from '#/api/demo';

import { ref } from 'vue';

import { JsonViewer, Page } from '@vben/common-ui';

import { ElButton, ElCard } from 'element-plus';

import { getMenu, getUserAuthenticated } from '#/api/demo';

// import {useJAResponseSuccesss} from '../../../utils/response'

const userInfo = ref<null | User>(null);

const menuInfo = ref<null | Result<RouteRecordStringComponent[]>>(null);

const getUserInfo = () => {
  getUserAuthenticated().then((res) => {
    // ElMessageBox.alert(JSON.stringify(res), '获取用户信息');
    userInfo.value = res;
  });
};

const getMenuByOther = () => {
  getMenu().then((res) => {
    menuInfo.value = res;
  });
};
// 请求菜单
</script>

<template>
  <Page
    description="封装了axios，可以和axios一样使用，另外封装了一些相关的配置。"
    title="请求响应演示"
  >
    <div class="columns-3">
      <ElCard>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">请求平台接口:</p>
          <p class="mb-3 text-gray-400">/ace-app-service/users/authenticated</p>
          <ElButton class="mb-2" @click="getUserInfo">获取用户信息</ElButton>
          <JsonViewer
            v-if="userInfo !== null"
            :value="userInfo"
            copyable
            preview-mode
            :show-array-index="false"
          />
        </div>
      </ElCard>
      <ElCard>
        <div class="brodge-demo__card border-gray-300 bg-gray-100">
          <p class="mb-3 font-bold">请求其他接口:</p>
          <p class="mb-3 text-gray-400">http://localhost:5320/api/menu/all</p>
          <ElButton class="mb-2" @click="getMenuByOther">获取菜单数据</ElButton>
          <JsonViewer
            v-if="menuInfo !== null"
            :value="menuInfo"
            copyable
            preview-mode
            :show-array-index="false"
          />
        </div>
      </ElCard>
    </div>
  </Page>
</template>

<style scoped>
.brodge-demo__card {
  /* border: 1px solid rgba(0,0,0,0.1); */
  margin-bottom: 20px;
  /* background-color: #f2f2f3; */
  padding: 10px 20px;
  border-radius: 4px;
}
.app-message-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
</style>
